<template>
  <el-dialog
    :title="title"
    v-model="model"
    width="800px"
    :before-close="closeHandle"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="楼栋名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="楼宇结构" prop="structure">
        <el-input v-model="form.structure" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="楼宇朝向" prop="floorOrientation">
        <el-input v-model="form.floorOrientation" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="楼层" prop="floor">
        <el-input-number v-model="form.floor" :step="1" :min="0" :max="999">
          <template #suffix>
            <span>层</span>
          </template>
        </el-input-number>
      </el-form-item>
      <el-form-item label="楼高" prop="height">
        <el-input-number
          v-model="form.height"
          :precision="2"
          :step="0.1"
          :min="0"
          :max="999"
        >
          <template #suffix>
            <span>米</span>
          </template>
        </el-input-number>
      </el-form-item>
      <el-form-item label="单元数" prop="totalUnitNum">
        <el-input-number
          v-model="form.totalUnitNum"
          :step="1"
          :min="0"
          :max="100"
        >
          <template #suffix>
            <span>单元</span>
          </template>
        </el-input-number>
      </el-form-item>
    </el-form>

    <template v-slot:footer>
      <div>
        <el-button @click="closeHandle">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, toRaw } from "vue";
import { ElMessage } from "element-plus";
import { saveFloor, updateFloor } from "@/api/realEstateManage";
const props = defineProps({
  communityId: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  row: {
    type: Object,
    default: () => {},
  },
});

const formRef = ref();
const isEdit = computed(() => !!props.row.id);

const emit = defineEmits(["submit"]);
const model = defineModel({
  default: false,
});

const form = ref({
  communityId: "",
  floor: "",
  floorOrientation: "",
  height: "",
  name: "",
  structure: "",
  totalUnitNum: "",
});

const rules = reactive({
  floor: [{ required: true, message: "请输入楼层" }],
  floorOrientation: [{ required: true, message: "请输入楼宇朝向" }],
  height: [{ required: true, message: "请输入楼高" }],
  name: [{ required: true, message: "请输入小区楼栋名称" }],
  structure: [{ required: true, message: "请输入楼宇结构" }],
  totalUnitNum: [{ required: true, message: "请输入总单元数" }],
});

onMounted(() => {
  form.value.communityId = props.communityId;
  if (isEdit.value) {
    form.value = { ...toRaw(props.row) };
  }
});

const closeHandle = () => {
  model.value = false;
};
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const params = {
        ...form.value,
      };
      if (isEdit.value) {
        params.id = props.row.id;
      }
      const api = isEdit.value ? updateFloor : saveFloor;
      api(params).then(() => {
        ElMessage({
          message: isEdit ? "编辑成功" : "添加成功",
          type: "success",
        });
        closeHandle();
        emit("submit", form.value);
      });
    }
  });
};
</script>

<style scoped>
.el-input-number {
  width: 100%;
}
</style>
